<template>
  <div id="group-management">
    <el-dialog title="选择分组" :visible.sync="value" width="30%">
      <el-tree :data="treeData" @node-click="moveGroupChnage" :default-expand-all="expandAll_flag" :expand-on-click-node="false">
        <span class="custom-tree-node" slot-scope="{node,data}">
          <span>{{ node.label }}</span>
          <span>
            <el-button type="text" size="mini" @click="openAddGroupDialog(node,data)" title="添加" v-if="data.id==''">
              <i class="el-icon-circle-plus-outline"></i>
            </el-button>
            <el-button type="text" size="mini" @click="openEditGroupDialog(node, data)" title="修改" v-if="data.id!=''">
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button type="text" size="mini" @click="delGroup(data.id)" title="删除">
              <i class="el-icon-delete"></i>
            </el-button>
          </span>
        </span>
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="moveGroup">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="groupDialog_title" :visible.sync="groupDialog_visible" append-to-body>
      <el-form ref="groupModel" :model="groupModel" label-position="right" label-width="140px" :rules="businessGroupRules" :hide-required-asterisk="true">
        <el-form-item label="上级业务分组" v-show="groupDialog_title == '添加分组'">
          <el-input v-model="groupModel.parentname" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="业务分组名称" prop="displayname">
          <el-input v-model="groupModel.displayname" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="groupDialog_visible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdateGroup">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import util from '@/utils'
// 引入接口api
import { getsubscribeTree, addGroup, saveOrUpdateSubscribeGroup, deleteSubscribeGroup } from '@/api/archives'
export default {
    data () {
        return {
            current_group_id: '',
            // 树节点是否展开
            expandAll_flag: true,
            treeData: [],
            groupDialog_title: '',
            groupDialog_visible: false,
            groupModel: {
                id: '',
                parentid: '',
                displayname: '',
                parentname: ''
            },
            businessGroupRules: {
                displayname: [
                    { required: true, message: '请输入分组名称', trigger: 'blur' }
                ]
            }
        }
    },
    props: {
        value: Boolean,
        objectUri: String,
        rowkey: String
    },
    created () {
        this.loadTree()
    },
    methods: {

    // 加载左侧菜单树
        loadTree () {
            getsubscribeTree().then(response => {
                this.treeData = util.parseTreeData(response.data)
            })
        },
        //
        // 移动分组选择
        moveGroupChnage (node) {
            this.current_group_id = node.id
        },
        // 确定移动分组
        moveGroup () {
            if (this.current_group_id === '') {
                this.$message.error('请选择分组')
                return false
            }
            let params = {
                gid: this.current_group_id,
                objs: [
                    {
                        objectUri: this.objectUri,
                        rowkey: this.rowkey
                    }
                ]
            }
            addGroup(params).then(response => {
                this.$message(response.msg)
                this.closeDialog()
            })
        },
        openAddGroupDialog (node, data) {
            this.groupDialog_title = '添加分组'
            this.groupDialog_visible = true
            this.groupModel.parentid = data.id
            this.groupModel.parentname = data.displayname
            this.groupModel.id = ''
            this.groupModel.displayname = ''
            this.$nextTick(() => {
                this.$refs.groupModel.clearValidate()
            })
        },
        openEditGroupDialog (node, data) {
            this.groupDialog_title = '修改分组'
            this.groupDialog_visible = true
            this.groupModel.parentid = node.parent.data.id || ''
            this.groupModel.id = data.id
            this.groupModel.displayname = data.displayname
            this.$nextTick(() => {
                this.$refs.groupModel.clearValidate()
            })
        },
        delGroup (id) {
            this.$confirm('确认删除该标签?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteSubscribeGroup(id).then(response => {
                    this.$message(response.msg)
                    this.groupDialog_visible = false
                    this.loadTree()
                })
            })
                .catch(() => {
                    this.$message({ type: 'info', message: '已取消删除' })
                })
        },
        saveOrUpdateGroup () {
            this.$refs.groupModel.validate(valid => {
                if (valid) {
                    let _postData = {}
                    for (let k in this.groupModel) {
                        if (k != 'parentname') {
                            _postData[k] = this.groupModel[k]
                        }
                    }
                    this.saveOrUpdateSubscribeGroup(_postData)
                } else {
                    return false
                }
            })
        },
        saveOrUpdateSubscribeGroup (data) {
            saveOrUpdateSubscribeGroup(data).then(response => {
                this.$message(response.msg)
                this.groupDialog_visible = false
                this.loadTree()
            })
        },
        // 关闭对话框
        closeDialog () {
            this.$emit('input', false)
            this.treeData = []
            this.current_group_id = ''
        }
    }
}
</script>
<style lang="less" scoped>
#group-management {
  .custom-tree-node {
    &:hover {
      .el-button {
        opacity: 1;
      }
    }
    .el-button {
      opacity: 0;
      color: #000;
    }
  }
}
</style>
